import { Avatar, Icon, Menu, Spin } from 'antd';
import React from 'react';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import { useRequest } from '@umijs/hooks';
import { getUserDetail } from '@/services/index';

const AvatarDropdown = props => {
  const onMenuClick = event => {
    const { key } = event;
  };
  // const { data: currentUser } = useRequest(() => getUserDetail());
  const currentUser = {}
  // const menuHeaderDropdown = (
  //   <Menu className={styles.menu} selectedKeys={[]}>
  //   <Menu.Item key="center">
  //     <Icon type="user" />
  //     个人中心
  //   </Menu.Item>
  //   <Menu.Divider />
  //   <Menu.Item key="settings" onClick={() => setForgetVisible(true)}>
  //     <Icon type="setting" />
  //     用户设置
  //   </Menu.Item>
  // </Menu>
  // );
  return currentUser && currentUser.tuCname ? (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
        <span className={styles.name}>{currentUser.tuCname}</span>
      </span>
    </HeaderDropdown>
  ) : (
    <Spin
      size="small"
      style={{
        marginLeft: 8,
        marginRight: 8,
      }}
    />
  );
};

export default AvatarDropdown;
